<template>
	<view class="outbox">
		<view class="back" @click="back">
			<image src="../../static/back.svg" mode=""></image>
		</view>
		<!-- 退出登录按钮 -->
		<view class="away" @click="findTost">
			退出登录
		</view>
		<!-- 遮罩层 -->
		<view class="hiden" v-show="state.hidenTost == true">
			<!-- 提示框 -->
			<view class="hidenTost" v-show="state.hidenTost == true">
				<!-- 提示文字 -->
				<view class="tostText">
					您确定要退出登录吗？
				</view>
				<!-- 分割线 -->
				<view class="fenge">
					
				</view>
				<!-- 退出确认按钮 -->
				<view class="tostButton">
					<!-- 取消按钮 -->
					<view class="tostButton-left" @click="cancel()" :class="state.buttonId == 1?'buttonBg':''">
						取消
					</view>
					<!-- 分割棒 -->
					<view class="tostButton-bar"></view>
					<!-- 确认按钮 -->
					<view class="tostButton-right" @click="select()" :class="state.buttonId == 2?'buttonBg':''">
						确认
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from "vue";
import {onShow} from '@dcloudio/uni-app';
	const state = reactive({
		hidenTost:false,
		buttonId:0
	})
	onShow(()=>{
		routerBe()
	})
	// 手动路由守卫，判断存不存在token，不存在则跳转回登入页面
	const routerBe = () => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				// console.log(res)
			},
			fail: (res) => {
				if (res) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			}
		})
	}
	// 打开弹窗
	const findTost = ()=>{
		state.hidenTost = true
	}
	// 取消退出登录
	const cancel = () =>{
		state.buttonId = 1
		setTimeout(()=>{
			state.buttonId = 0
			setTimeout(()=>{
				state.hidenTost = false
			},100)
		},100)
	}
	// 确认退出登录
	const select = ()=>{
		state.buttonId = 2
		setTimeout(()=>{
			state.buttonId = 0
			setTimeout(()=>{
				state.hidenTost = false
				uni.removeStorage({
					key:'Authorization',
					success: () => {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})
			},100)
		},100)
	}
	// 返回上一页
	const back = () =>{
		uni.navigateBack()
	}
</script>

<style lang="less" scoped>
.outbox{
	width: 100vw;
	height: 100vh;
	padding-top: var(--status-bar-height);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	.back{
		position: absolute;
		left: 80rpx;
		top: 100rpx;
		width: 80rpx;
		height: 80rpx;
		background: #ffffff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0rpx 0rpx 2rpx 4rpx #f5f5f5;
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.away{
		margin-bottom: 40rpx;
		width: 80%;
		height: 100rpx;
		border: 0.2rpx solid lightskyblue;
		border-radius: 36rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
		color: red;
		box-shadow:-2rpx 2rpx 8rpx 6rpx #cccccc41;
	}
	.hiden{
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(143, 143, 143, 0.416);
		.hidenTost{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			width: 70%;
			height: 300rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			.tostText{
				width: 100%;
				height: 70%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 40rpx;
			}
			.fenge{
				width: 100%;
				height: 0.2rpx;
				background-color: #cdcdcd;
			}
			.tostButton{
				width: 100%;
				height: 30%;
				display: flex;
				align-items: center;
				font-size: 34rpx;
				.tostButton-left{
					width: 50%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom-left-radius: 20rpx;
				}
				.tostButton-bar{
					width: 0.2rpx;
					height: 100%;
					background: #cdcdcd;
				}
				.tostButton-right{
					width: 50%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: red;
					border-bottom-right-radius: 20rpx;
				}
				.buttonBg{
					transition: all 0.1s;
					background-color: rgba(143, 143, 143, 0.258);
				}
			}
		}
	}
}
</style>
